new Vue({
    el: '#app',
    data: {
        loading: false,
        tableData: [],//列表数据源
        queryData: { //列表查询数据源
            content: '',//查询内容
            pageNum: 1,//当前页数
            pageSize: 10,//每页要查询的条数
        },
        count: 0,//页面加载数据的总数
        dialogVisible:false,//控制 新建/修该 弹窗的显示和隐藏
        addForm:{ //新增/修改的数据源
            content: '',
            type: '',
            id:'',
        },
        tagList:[],//弹出框里选择标签类型的数据源


    },
    created() {
        this.getList();//加载列表数据
        this.getTagList()//加载标签列表数据
    },
    methods: {
        //修改按钮的事件
        updateClick(row){
            this.dialogVisible = true
            this.addForm.id = row.id
            this.addForm.content = row.content
            this.addForm.type = row.type

        },
        //删除按钮的事件
        deleteClick(row){
            this.$confirm(`您确定要删除"${row.content}"吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                const params = {
                    id: row.id
                };
                this.loading = true;
                $.ajax({
                    type: "post",
                    url: '/tags/delete',
                    data: params,
                    dataType: "json",
                    success: (res, s, xhr) => {
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        } else {
                            this.$message.error(res.msg || "网络异常");
                            this.loading = false;
                        }
                    },
                    error: (xhr, s, err) => {
                        this.$message.error(err.msg || "网络异常");
                        this.loading = false;
                        return false;
                    }
                });
            }).catch(() => {

            });
        },
        //添加按钮的事件
        addClick(){
            this.dialogVisible = true
            this.addForm.id = null
            this.addForm.content = ""
            this.addForm.type = ""
        },
        //分页组件 - 当前页数改变的事件
        handleCurrentChange(val) {
            this.queryData.page = val
            this.getList()
        },
        //分页组件 - 一页要加载的条数的改变事件
        handleSizeChange(val) {
            this.queryData.page = 1
            this.queryData.limit = val
            this.getList()
        },
        // 新增 、修改 表单事件
        submitForm() {
            if(!this.addForm.content){
                this.$message.error('请输入标签名称')
                return
            }
            if(!this.addForm.type){
                this.$message.error('请选择标签类型')
                return
            }
            this.update()
        },
        //获取列表数据的接口
        getList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/tags/list',
                data: this.queryData,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.tableData = res.data.items
                        this.count = res.data.itemsTotalCount

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取标签类型列表的接口
        getTagList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/tagsType/list',
                data: {},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.tagList = res.data

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        // 修改接口
        update() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/tags/update',
                data: this.addForm,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success(this.addForm.id?'修改成功！':'新增成功！')
                        this.dialogVisible = false
                        this.getList();

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }

                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
    }
})
